<template>
  <el-dialog
    :title="!dataForm.id ? '新建' : '编辑'"
    :close-on-click-modal="false"
    append-to-body
    :visible.sync="visible"
    class="JNPF-dialog JNPF-dialog_center"
    lock-scroll
    width="600px"
  >
    <el-row :gutter="15" class="">
      <el-form
        ref="elForm"
        :model="dataForm"
        :rules="rules"
        size="small"
        label-width="100px"
        label-position="right"
      >
        <template v-if="!loading">
          <el-col :span="24">
            <jnpf-form-tip-item label="采编名称" prop="projectname">
              <el-input
                v-model="dataForm.projectname"
                @change="changeData('projectname', -1)"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="采编项目编码" prop="projectcode">
              <el-input
                v-model="dataForm.projectcode"
                @change="changeData('projectcode', -1)"
                placeholder="系统自动生成"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="成果类型" prop="achievementtype">
              <JnpfSelect
                v-model="dataForm.achievementtype"
                @change="changeData('achievementtype', -1)"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                :options="achievementtypeOptions"
                :props="achievementtypeProps"
              >
              </JnpfSelect>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="所属学院" prop="affiliatedcollege">
              <com-select v-model="dataForm.affiliatedcollege"
                @change="changeData('affiliatedcollege',-1)" placeholder="请选择" clearable
                :style='{"width":"100%"}'>

              </com-select>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="项目类型" prop="gainType">
              <JnpfSelect
                v-model="dataForm.gainType"
                @change="changeData('gainType', -1)"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                :options="gainTypeOptions"
                :props="gainTypeProps"
              >
              </JnpfSelect>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item
              label="项目完成人"
              prop="projectcompletionperson"
            >
              <user-select
                v-model="dataForm.projectcompletionperson"
                @change="changeData('projectcompletionperson', -1)"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                :multiple="true"
                selectType="all"
              >
              </user-select>
            </jnpf-form-tip-item>
          </el-col>

          <el-col :span="12">
            <jnpf-form-tip-item label="项目开始时间" prop="projectstart">
              <JnpfDatePicker
                v-model="dataForm.projectstart"
                @change="changeData('projectstart', -1)"
                placeholder="开始时间"
                clearable
                :style="{ width: '100%' }"
                type="date"
                format="yyyy-MM-dd"
                value-format="timestamp"
                :startTime="dateTime(false, 1, 1, '', '')"
                :endTime="dateTime(false, 1, 1, '', '')"
              >
              </JnpfDatePicker>
            </jnpf-form-tip-item>
          </el-col>

          <el-col :span="12">
            <jnpf-form-tip-item label="项目结束时间" prop="projectend">
              <JnpfDatePicker
                v-model="dataForm.projectend"
                @change="changeData('projectend', -1)"
                placeholder="结束时间"
                clearable
                :style="{ width: '100%' }"
                type="date"
                format="yyyy-MM-dd"
                value-format="timestamp"
                :startTime="dateTime(false, 1, 1, '', '')"
                :endTime="dateTime(false, 1, 1, '', '')"
              >
              </JnpfDatePicker>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="是否启用" prop="isenable">
              <el-switch
                v-model="dataForm.isenable"
                @change="changeData('isenable', -1)"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="封面图片" prop="coverurl">
              <choiceFile
                v-model="dataForm.coverurl"
                @change="changeData('coverurl', -1)"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                field="coverurl"
                modelId="522797617961239365"
                :columnOptions="coverurlcolumnOptions"
                :templateSelection="dataForm.coverurl"
                :innerValue="dataForm.coverurlname"
                :keyname="'coverurl'"
                :fileType="'img'"
                relationField="billRuleField119"
                popupWidth="800px"
                hasPage
                :pageSize="20"
                @choiceFileEmit="choiceFileEmit"
              >
              </choiceFile>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="视频文件" prop="videourl">
              <choiceFile
                v-model="dataForm.videourl"
                @change="changeData('videourl', -1)"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                field="videourl"
                modelId="395179260593052933"
                :columnOptions="videourlcolumnOptions"
                :templateSelection="dataForm.videourl"
                :innerValue="dataForm.videourlname"
                :keyname="'videourl'"
                :fileType="'file'"
                relationField="name"
                popupWidth="800px"
                hasPage
                :pageSize="20"
                @choiceFileEmit="choiceFileEmit"
              >
              </choiceFile>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="序号" prop="sort">
              <JnpfInputNumber
                v-model="dataForm.sort"
                @change="changeData('sort', -1)"
                placeholder="数字文本"
                :step="1"
                controlsPosition="bothSides"
              >
              </JnpfInputNumber>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="项目简介" prop="briefintroduction">
              <el-input
                v-model="dataForm.briefintroduction"
                @change="changeData('briefintroduction', -1)"
                placeholder="请输入"
                :style="{ width: '100%' }"
                true
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
              >
              </el-input>
            </jnpf-form-tip-item>
          </el-col>
        </template>
      </el-form>
      <SelectDialog
        v-if="selectDialogVisible"
        :config="currTableConf"
        :formData="dataForm"
        ref="selectDialog"
        @select="addForSelect"
        @close="selectDialogVisible = false"
      />
    </el-row>
    <span slot="footer" class="dialog-footer">
      <div class="upAndDown-button" v-if="dataForm.id">
        <el-button @click="prev" :disabled="prevDis">
          {{ "上一条" }}
        </el-button>
        <el-button @click="next" :disabled="nextDis">
          {{ "下一条" }}
        </el-button>
      </div>
      <el-button @click="visible = false"> 取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading">
        确 定</el-button
      >
      <!-- <el-button type="primary" @click="dataFormSubmit(2)" :loading="continueBtnLoading">
        {{!dataForm.id ?'确定并新增':'确定并继续'}}</el-button> -->
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import { mapGetters } from "vuex";
import { getDataInterfaceRes } from "@/api/systemData/dataInterface";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { getDefaultCurrentValueUserId } from "@/api/permission/user";
import { getDefaultCurrentValueDepartmentId } from "@/api/permission/organize";
import {
  getDateDay,
  getLaterData,
  getBeforeData,
  getBeforeTime,
  getLaterTime
} from "@/components/Generator/utils/index.js";
import { thousandsFormat } from "@/components/Generator/utils/index";
import choiceFile from "./choiceFile.vue";
export default {
  components: { choiceFile },
  props: [],
  data() {
    return {
      dataFormSubmitType: 0,
      continueBtnLoading: false,
      index: 0,
      prevDis: false,
      nextDis: false,
      allList: [],
      visible: false,
      loading: false,
      btnLoading: false,
      selectDialogVisible: false,
      currTableConf: {},
      addTableConf: {},
      //可选范围默认值
      ableAll: {},
      tableRows: {},
      currVmodel: "",
      dataForm: {
        projectname: "",
        projectcode: "",
        achievementtype: "",
        affiliatedcollege: "",
        gainType:'',
        projectcompletionperson: [],
        projectstart: "",
        projectend: "",
        isenable: 1,
        coverurl: "",
        videourl: "",
        sort: 0,
        briefintroduction: "",
        iscomplete: "",
        state: ""
      },
      rules: {
        projectname: [
          {
            required: true,
            message: "请输入",
            trigger: "blur"
          }
        ]
      },
      achievementtypeOptions: [],
      gainTypeOptions: [],
      achievementtypeProps: { label: "fullName", value: "id" },
      gainTypeProps: { label: "fullName", value: "id" },
      coverurlcolumnOptions: [],
      videourlcolumnOptions: [],

      childIndex: -1,
      isEdit: false,
      interfaceRes: {
        projectname: [],
        projectcode: [],
        achievementtype: [],
        affiliatedcollege: [],
        projectcompletionperson: [],
        projectstart: [],
        projectend: [],
        isenable: [],
        coverurl: [],
        videourl: [],
        sort: [],
        briefintroduction: [],
        iscomplete: [],
        state: []
      }
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  watch: {},
  created() {
    this.dataAll();
  },
  mounted() {},
  methods: {
    prev() {
      this.index--;
      if (this.index === 0) {
        this.prevDis = true;
      }
      this.nextDis = false;
      for (let index = 0; index < this.allList.length; index++) {
        const element = this.allList[index];
        if (this.index == index) {
          this.getInfo(element.id);
        }
      }
    },
    next() {
      this.index++;
      if (this.index === this.allList.length - 1) {
        this.nextDis = true;
      }
      this.prevDis = false;
      for (let index = 0; index < this.allList.length; index++) {
        const element = this.allList[index];
        if (this.index == index) {
          this.getInfo(element.id);
        }
      }
    },
    getInfo(id) {
      request({
        url: "/api/example/MzCompilationproject/" + id,
        method: "get"
      }).then(res => {
        this.dataInfo(res.data);
      });
    },
    goBack() {
      this.visible = false;
      this.$emit("refreshDataList", true);
    },
    changeData(model, index) {
      this.isEdit = false;
      this.childIndex = index;
      let modelAll = model.split("-");
      let faceMode = "";
      for (let i = 0; i < modelAll.length; i++) {
        faceMode += modelAll[i];
      }
      for (let key in this.interfaceRes) {
        if (key != faceMode) {
          let faceReList = this.interfaceRes[key];
          for (let i = 0; i < faceReList.length; i++) {
            if (faceReList[i].relationField == model) {
              let options = "get" + key + "Options";
              if (this[options]) {
                this[options]();
              }
              this.changeData(key, index);
            }
          }
        }
      }
    },
    changeDataFormData(type, data, model, index, defaultValue) {
      if (!this.isEdit) {
        if (type == 2) {
          for (let i = 0; i < this.dataForm[data].length; i++) {
            if (index == -1) {
              this.dataForm[data][i][model] = defaultValue;
            } else if (index == i) {
              this.dataForm[data][i][model] = defaultValue;
            }
          }
        } else {
          this.dataForm[data] = defaultValue;
        }
      }
    },
    dataAll() {
      this.getachievementtypeOptions();
      this.getgainTypeOptions();
    },
    getachievementtypeOptions() {
      getDictionaryDataSelector("502916754670878725").then(res => {
        this.achievementtypeOptions = res.data.list;
      });
    },
    getgainTypeOptions() {
      getDictionaryDataSelector("534298679746494597").then(res => {
        this.gainTypeOptions = res.data.list;
      });
    },
    clearData() {
      this.dataForm.projectname = "";
      this.dataForm.projectcode = "";
      this.dataForm.achievementtype = "";
      this.dataForm.affiliatedcollege = "";
      this.dataForm.gainType="";
      this.dataForm.projectcompletionperson = [];
      this.dataForm.projectstart = "";
      this.dataForm.projectend = "";
      this.dataForm.isenable = 1;
      this.dataForm.coverurl = "";
      this.dataForm.videourl = "";
      this.dataForm.sort = 0;
      this.dataForm.briefintroduction = "";
      this.dataForm.iscomplete = "";
      this.dataForm.state = "";
    },
    init(id, isDetail, allList) {
      console.log(allList);
      this.prevDis = false;
      this.nextDis = false;
      this.allList = allList || [];
      if (allList && allList.length) {
        this.index = this.allList.findIndex(item => item.id === id);
        if (this.index == 0) {
          this.prevDis = true;
        }
        if (this.index == this.allList.length - 1) {
          this.nextDis = true;
        }
      } else {
        this.prevDis = true;
        this.nextDis = true;
      }
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: "/api/example/MzCompilationproject/" + this.dataForm.id,
            method: "get"
          }).then(res => {
            this.dataInfo(res.data);
            this.loading = false;
          });
        } else {
          this.clearData();
          this.initDefaultData();
        }
      });
      this.$store.commit("generator/UPDATE_RELATION_DATA", {});
    },
    //初始化默认数据
    initDefaultData() {},
    // 表单提交
    dataFormSubmit(type) {
      this.dataFormSubmitType = type ? type : 0;
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          this.request();
        }
      });
    },
    request() {
      if (this.dataFormSubmitType == 2) {
        this.continueBtnLoading = true;
      } else {
        this.btnLoading = true;
      }
      let _data = this.dataList();
      if (!this.dataForm.id) {
        request({
          url: "/api/example/MzCompilationproject",
          method: "post",
          data: _data
        })
          .then(res => {
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1000,
              onClose: () => {
                if (this.dataFormSubmitType == 2) {
                  this.$nextTick(() => {
                    this.$refs["elForm"].resetFields();
                    this.clearData();
                    this.initDefaultData();
                  });
                  this.continueBtnLoading = false;
                  return;
                }
                this.visible = false;
                this.btnLoading = false;
                this.$emit("refresh", true);
              }
            });
          })
          .catch(() => {
            this.btnLoading = false;
            this.continueBtnLoading = false;
          });
      } else {
        request({
          url: "/api/example/MzCompilationproject/" + this.dataForm.id,
          method: "PUT",
          data: _data
        })
          .then(res => {
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1000,
              onClose: () => {
                if (this.dataFormSubmitType == 2)
                  return (this.continueBtnLoading = false);
                this.visible = false;
                this.btnLoading = false;
                this.$emit("refresh", true);
              }
            });
          })
          .catch(() => {
            this.btnLoading = false;
            this.continueBtnLoading = false;
          });
      }
    },
    openSelectDialog(key) {
      this.currTableConf = this.addTableConf[key];
      this.currVmodel = key;
      this.selectDialogVisible = true;
      this.$nextTick(() => {
        this.$refs.selectDialog.init();
      });
    },
    addForSelect(data) {
      for (let i = 0; i < data.length; i++) {
        let item = { ...this.tableRows[this.currVmodel], ...data[i] };
        this.dataForm[this.currVmodel].push(item);
      }
    },
    dateTime(timeRule, timeType, timeTarget, timeValueData, dataValue) {
      let timeDataValue = null;
      let timeValue = Number(timeValueData);
      if (timeRule) {
        if (timeType == 1) {
          timeDataValue = timeValue;
        } else if (timeType == 2) {
          timeDataValue = dataValue;
        } else if (timeType == 3) {
          timeDataValue = new Date().getTime();
        } else if (timeType == 4) {
          let previousDate = "";
          if (timeTarget == 1 || timeTarget == 2) {
            previousDate = getDateDay(timeTarget, timeType, timeValue);
            timeDataValue = new Date(previousDate).getTime();
          } else if (timeTarget == 3) {
            previousDate = getBeforeData(timeValue);
            timeDataValue = new Date(previousDate).getTime();
          } else {
            timeDataValue = getBeforeTime(timeTarget, timeValue).getTime();
          }
        } else if (timeType == 5) {
          let previousDate = "";
          if (timeTarget == 1 || timeTarget == 2) {
            previousDate = getDateDay(timeTarget, timeType, timeValue);
            timeDataValue = new Date(previousDate).getTime();
          } else if (timeTarget == 3) {
            previousDate = getLaterData(timeValue);
            timeDataValue = new Date(previousDate).getTime();
          } else {
            timeDataValue = getLaterTime(timeTarget, timeValue).getTime();
          }
        }
      }
      return timeDataValue;
    },
    time(timeRule, timeType, timeTarget, timeValue, formatType, dataValue) {
      let format = formatType == "HH:mm" ? "HH:mm:00" : formatType;
      let timeDataValue = null;
      if (timeRule) {
        if (timeType == 1) {
          timeDataValue = timeValue || "00:00:00";
          if (timeDataValue.split(":").length == 3) {
            timeDataValue = timeDataValue;
          } else {
            timeDataValue = timeDataValue + ":00";
          }
        } else if (timeType == 2) {
          timeDataValue = dataValue;
        } else if (timeType == 3) {
          timeDataValue = this.jnpf.toDate(new Date(), format);
        } else if (timeType == 4) {
          let previousDate = "";
          previousDate = getBeforeTime(timeTarget, timeValue);
          timeDataValue = this.jnpf.toDate(previousDate, format);
        } else if (timeType == 5) {
          let previousDate = "";
          previousDate = getLaterTime(timeTarget, timeValue);
          timeDataValue = this.jnpf.toDate(previousDate, format);
        }
      }
      return timeDataValue;
    },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm));
      _data.affiliatedcollege = Array.isArray(_data.affiliatedcollege) ? JSON.stringify(_data.affiliatedcollege) : '[]'
      _data.projectcompletionperson = Array.isArray(
        _data.projectcompletionperson
      )
        ? JSON.stringify(_data.projectcompletionperson)
        : "[]";
      _data.isenable = parseInt(_data.isenable);
      return _data;
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      _dataAll.affiliatedcollege = _dataAll.affiliatedcollege ? JSON.parse(_dataAll.affiliatedcollege) : []
      _dataAll.projectcompletionperson = _dataAll.projectcompletionperson
        ? JSON.parse(_dataAll.projectcompletionperson)
        : [];
      _dataAll.isenable = parseInt(_dataAll.isenable);
      this.dataForm = _dataAll;
      this.isEdit = true;
      this.dataAll();
      this.childIndex = -1;
    },
    choiceFileEmit(obj) {
      console.log(obj);
      this.dataForm[obj.name + "name"] = obj.fullName;
      this.dataForm[obj.name] = obj.id;
    }
  }
};
</script>
